<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../bower_components/colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../bower_components/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>Image errors test</h1>
    <p>With some errors</p>
    <!-- TODO this test could be automated -->
    <div id="incorrectimages" class="justified-gallery" style="background-color: red;">
        <!--<a href="http://dummyimage.com/250x300/000/ffffff.png" title="image 1 title">-->
            <!--<img src="http://dummyimage.com/250x300/000/ffffff.png" />-->
        <!--</a>-->
        <a href="IDONTEXISTS" title="IDONTEXISTS">
            <img src="IDONTEXISTS" />
        </a>
        <a href="IDONTEXISTS" title="IDONTEXISTS">
            <img src="IDONTEXISTS" />
        </a>
        <a href="IDONTEXISTS" title="IDONTEXISTS">
            <img src="IDONTEXISTS" />
        </a>
        <!--<a href="http://dummyimage.com/250x400/000/ffffff.png" title="image 3 title">-->
            <!--<img src="http://dummyimage.com/250x400/000/ffffff.png" />-->
        <!--</a>-->
        <!--<a href="http://dummyimage.com/200x300/000/ffffff.png" title="image 4 title">-->
            <!--<img src="http://dummyimage.com/200x300/000/ffffff.png" />-->
        <!--</a>-->
        <!--<a href="../photos/onlythethumbnail_t.jpg" title="Only the thumbnail image">-->
            <!--<img src="../photos/onlythethumbnail_t.jpg" />-->
        <!--</a>-->
        <!--<a href="http://dummyimage.com/250x300/000/ffffff.png" title="image 6 title">-->
            <!--<img src="http://dummyimage.com/250x300/000/ffffff.png" />-->
        <!--</a>-->
    </div>
    
    <!-- bower:js -->
    <script src="../../bower_components/jquery/dist/jquery.js"></script>
    <script src="../../bower_components/colorbox/jquery.colorbox.js"></script>
    <script src="../../bower_components/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
    $("#incorrectimages").justifiedGallery({
        rowHeight: 300
    });
    </script>
</body>

</html>
